<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <title>用户综合查询</title>
  <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" />
  <script th:src="@{/js/jquery-3.6.0.min.js}"></script>
  <script type="text/javascript">
    function deleteUser(element) {
      const uid = element.getAttribute('data-uid');
      const username = element.getAttribute('data-username');

      if (confirm("确定要删除 " + username + " 的记录吗？")) {
        window.location.href = '/shopping/user/delete?uid=' + uid;
      }
    }
  </script>
</head>

<body>

  <div class="panel panel-primary">
    <div class="panel-heading">
      <div th:replace="~{header}">
      </div>
    </div>
  </div>

  <br><br>
  <div class="container">
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">用户综合查询</h3>
      </div>

      <div class="panel-body">

        <div>
          <form action="#" th:action="@{/user/query}" name="myform" method="post" class="form-horizontal">
            <span>&nbsp;姓名&nbsp;</span>
            <span><input type="text" size="10" name="username" th:value="${param.username}" /></span>
            <span>&nbsp;住址&nbsp;</span>
            <span><input type="text" size="10" name="mailingaddress" th:value="${param.mailingaddress}" /></span>
            <span>&nbsp;性别&nbsp;</span>

            <select name="ssex">
              <option value="" th:selected="${ssex == null or ssex == ''}">请选择</option>
              <option value="男" th:selected="${ssex == '男'}">男</option>
              <option value="女" th:selected="${ssex == '女'}">女</option>
            </select>
            <select id="pageno" name="pageno" >
              <option th:each="t : ${#numbers.sequence(1, totalPages)}" th:value="${t}"
                th:text="'第' + ${t} + '页'" th:selected="${pageNo == t}"></option>
            </select>

            <span>&nbsp;</span>
            <button type="submit" class="btn btn-success">查询</button>
          </form>
        </div>

        <div th:if="${not #lists.isEmpty(users)}">
          <ul class="pagination">
            <li><a th:text="'第' + ${currentPage} + '页 &nbsp;共' + ${totalPages} + '页'">Pagination Info</a></li>
            <li><span style="width: 6px"></span></li>
            <li><a th:text="'共' + ${totalItems} + '条记录'">Total Records</a></li>
          </ul>
          <div class="table table-responsive">
            <table id="tb" class="table table-bordered table-hover">
              <thead class="text-center">
                <tr>
                  <th>序号</th>
                  <th>uid</th>
                  <th>姓名</th>
                  <th>性别</th>
                  <th>地址</th>
                  <th>电话号码</th>
                  <th>爱好</th>
                  <th>删除</th>
                </tr>
              </thead>
              <tbody class="text-center">
                <tr th:each="user, iterStat : ${users}">
                  <td th:text="${( (pageNo ?: 1) - 1 ) * (pageSize ?: 10) + iterStat.index + 1}">
                    Index
                  </td>
                  <td><a th:href="@{/userEdit(uid=${user.uid})}" th:text="${user.uid}">UID</a></td>
                  <td><a th:href="@{/userEdit(uid=${user.uid})}" th:text="${user.username}">Username</a></td>
                  <td th:text="${user.ssex}">Sex</td>
                  <td th:text="${user.mailingaddress}">Address</td>
                  <td th:text="${user.phone}">Phone</td>
                  <td th:text="${user.hobby}">Hobby</td>
                  <td>
                    <a href="javascript:void(0)" th:attr="data-uid=${user.uid}, data-username=${user.username}"
                      onclick="deleteUser(this)">删除</a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div>
        <br><br><br>
      </div>
    </div>

  </div>

</body>

</html>